
import React, { Component } from "react";
// import store from './store/index'
// import './page2.scss'

// connect 是用来连接  显示组件 和 状态组件 用的方法
import { connect } from "react-redux";

class Page2 extends Component {



    render() {

        // const proList = store.getState().pro.proList

        return <>
            <h1 className="page2">Page2 ----- {this.props.count}</h1>
            <button onClick={() => {
                this.props.add()
            }}>点击加 1 </button>
            <button onClick={() => this.props.addNum(5)} >点击加 5</button>
            <ol>
                {this.props.proList && this.props.proList.map((item) => {
                    return <li key={item.proid}>{item.proname}</li>
                })}
            </ol>



        </>
    }
}


// 将全局状态中的数据映射到组件的 props 中
// state 就是全局中的数据
const mapStateToProps = (state) => {
    return {
        proList: state.pro.proList,
        count: state.count.count
    }
}

// 将全局的修改方法映射到组件的 props 中
const mapDispatchToProps = (dispatch) => {

    return {
        add() {
            dispatch({ type: 'add' })
        },
        addNum(value) {
            dispatch({ type: 'addNum', payload: value })
        }
    }
}

// connect 是用来连接数据和视图的
// connect(映射状态到组件的props中，映射修改函数到组件的props中)
// connect 返回值是一个高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(Page2)


// function connect(state) {
//     return (Com) => {
//         <Com state={state}></Com>
//     }
// }
// connect()(Page2)
